<template>
  <div class="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-shadow duration-300">
    <div class="flex items-center mb-4">
      <div class="w-10 h-10 bg-[#E30314] rounded-full flex items-center justify-center mr-3">
        <span class="text-white font-bold">{{ index + 1 }}</span>
      </div>
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900">{{ type.title }}</h3>
    </div>
    <p class="text-gray-600 mb-4">{{ type.description }}</p>
    <ul class="space-y-2">
      <li v-for="(advantage, idx) in type.advantages" :key="idx" 
          class="flex items-start space-x-2">
        <svg class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm text-gray-600">{{ advantage }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  type: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    required: true
  }
})
</script> 